<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 网站信息管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <i class="el-icon-lx-service"></i> 联系我们
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="title">
                <span v-show="!editing">{{about.title}}</span>
                <el-button v-show="!editing" type="text" @click="editing=true">修改标题</el-button>
                <el-input v-show="editing" type="text" v-model="about.title" @input="titleChange">
                    <i
                        class="el-icon-edit el-input__icon"
                        slot="prefix"
                    >
                    </i>
                </el-input>
            </div>
            <div class="detail">
                <el-upload
                        v-show="false"
                        class="imgUpload"
                        :action="imgUploadUrl"
                        name="img"
                        accept="image/*"
                        :show-file-list="false"
                        :multiple="false"
                        :on-success="onSuccess"
                        :before-upload="beforeUpload">
                </el-upload>
                <quill-editor
                        ref="QuillEditor"
                        v-model="about.detail"
                        :options="editorOption"
                        @change="onEditorChange"
                        @blur="onEditorBlur"
                        @focus="onEditorFocus"
                        @ready="onEditorReady"
                >
                </quill-editor>
                <div class="bottom">
                    <el-button class="save-btn" :disabled="isChange<1" type="primary" @click="submit">保存</el-button>
                    <span>创建人： <label>{{about.createOne.nick}}</label></span>
                    <span>创建时间： <label>{{about.createTime}}</label></span>
                    <span>上次更新： <label>{{about.updateOne.nick}}</label></span>
                    <span>更新时间: <label>{{about.updateTime}}</label></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getRequest, postRequest } from '../../api';
    import { getTime } from '../../utils/dateTimeUtil';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor } from 'vue-quill-editor';
    import Quill from 'quill';
    import ImageResize from 'quill-image-resize-module';
    import { ImageDrop } from 'quill-image-drop-module';
    import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module';

    Quill.register('modules/imageDrop', ImageDrop);
    Quill.register('modules/imageResize', ImageResize);
    Quill.register('modules/imageExtend', ImageExtend);
    import { addQuillTitle, editorModules } from '../../utils/quillEditor';

    export default {
        name: 'About',
        data() {
            return {
                about: {
                    aboutId: 0,
                    title: '',
                    detail: '',
                    createBy: 0,
                    createTime: '',
                    updateBy: 0,
                    updateTime: '',
                    state: 0,
                    createOne: {},
                    updateOne: {}
                },
                currentUserNick: sessionStorage.getItem('userNick'),
                currentUserId: Number(sessionStorage.getItem('userId')),
                editorOption: {
                    placeholder: '请输入联系我们的详细内容',
                    theme: 'snow',
                    modules: editorModules
                },
                isChange: -1,
                imgUploadUrl: '/api/saveImageToServer',
                serverUrl: 'http://localhost:8888',
                editing: false
            };
        },
        created() {
            this.getAbout();
        },
        components: {
            quillEditor
        },
        mounted() {
            addQuillTitle();
        },
        methods: {
            getAbout() {
                getRequest('/getAbout').then(resp => {
                    if (resp) {
                        this.about = resp;
                    } else {
                        console.log('获取信息失败!');
                    }
                });
            },
            submit() {
                this.about.updateOne = { nick: this.currentUserNick };
                const date = new Date();
                this.about.updateTime = getTime(date);
                const params = {
                    aboutId: this.about.aboutId,
                    title: this.about.title,
                    detail: this.about.detail,
                    currentUserId: this.currentUserId,
                    updateTime: date.getTime()
                };
                postRequest('/modifyAbout', params).then(resp => {
                    if (resp === 'success') {
                        this.$message.success('保存成功！');
                        this.isChange = 0;
                        this.editing = false;
                    } else {
                        this.$message.error('操作失败！');
                    }
                });
            },
            // 富文本处理
            showHtml(str) {
                return str
                    .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
                    .replace(/&lt;/g, '<')
                    .replace(/&gt;/g, '>')
                    .replace(/&quot;/g, '"')
                    .replace(/&#39;/g, '\'')
                    .replace(/&amp;nbsp;/g, '\u3000');
            },
            onEditorChange(event) {
                this.isChange++;
            },
            titleChange(){
              this.isChange++;
            },
            onEditorBlur(event) {

            },
            onEditorFocus(event) {

            },
            onEditorReady(event) {

            },
            beforeUpload(file) {
            },
            onSuccess(res) {
                // 获取富文本组件实例
                let quill = this.$refs.QuillEditor.quill;
                // 如果上传成功
                if (res) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片，res为服务器返回的图片链接地址
                    const url = this.serverUrl + res;
                    quill.insertEmbed(length, 'image', url);
                    // 调整光标到最后
                    quill.setSelection(length + 1);
                } else {
                    // 提示信息，需引入Message
                    this.$message.error('图片插入失败！');
                }
            }
        }

    };
</script>

<style scoped>
    .detail {

    }

    .el-input {
        width: 200px;
    }

    .title {
        margin-bottom: 30px;
    }

    .title span {
        font-size: 20px;
        font-weight: bold;
    }

    .title .el-button {
        margin-left: 20px;
    }

    .save-btn {
        margin: 10px 0;
        width: 100px;
    }
    .bottom span{
        font-size: 14px;
        margin-left: 12%;
    }
    .bottom label{
        color: #2d8cf0;
    }
</style>